<!-- 列表查询视图组件 -->
<template>
  <div class="ky-container">
    <el-card shadow="hover" class="ky-card ky-card-hdbg">
      <el-form ref="form" :model="formData" :rules="rules" :inline="true" class="ky-form-inline ky-form-inline-sm" label-width="83px">
        <el-form-item :label="item.label" :prop="key" v-for="(item,key,index) in formItems" :key="index">
          <el-select v-if="item.type === 'select'" size="small" collapse-tags :multiple="item.multiple" v-model="formData[key]" placeholder="请选择" @change="item.selectChange">
            <el-option
              v-for="(v,i) in item.options"
              :key="i"
              :label="v[item.optionsLabel] ? v[item.optionsLabel] : v"
              :value="v[item.optionsValue] ? v[item.optionsValue] : v"
            ></el-option>
          </el-select>
          <el-input v-if="item.type === 'input'" v-model="formData[key]" placeholder="请输入"></el-input>
          <el-date-picker
            v-if="item.type === 'datePicker'"
            v-model="formData[key]"
            align="right"
            placeholder="请选择"
            value-format="yyyy-MM-dd">
          </el-date-picker>
          <el-date-picker
            v-if="item.type === 'dateRangePicker'"
            v-model="formData[key]"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="m-l-0" size="small" icon="el-icon-search" @click="search">查询</el-button>
          <el-button class="m-l-0" size="small" @click="resetParam" plain>重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="hover" class="ky-card ky-card-hdbg ky-mt10">
      <slot name="tool-box"></slot>
      <el-table
        ref="table"
        v-loading="loading"
        size="medium"
        :data="tableData"
        style="width: 100%"
        border
        class="ky-table"
      >
        <slot name="operation-column"></slot>
        <el-table-column v-for="(v,index) in tableColumn" :key="index" align="left" :prop="v.prop" :label="v.label" :width="v.width ? v.width : ''" :formatter="v.formatter"></el-table-column>
      </el-table>
      <paginationCont
        :total="totalCount"
        :page.sync="currentPage"
        :limit.sync="pageSize"
        @pagination="changePagenation"
      />
    </el-card>
  </div>
</template>

<script>
import paginationCont from '@/components/Pagination/index'
export default {
  name: '',
  mixins: [],
  components: { paginationCont },
  props: {
    formItems: {
      type: Object,
      default: () => {}
    },
    api: {
      type: Function,
      default: () => {}
    },
    tableColumn: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      formData: {},
      rules: {},
      loading: false,
      totalCount: 0,
      pageSize: 10,
      currentPage: 1,
      tableData: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  watch: {},
  computed: {},
  created() {
    for (let k in this.formItems) {
      if (this.formItems[k].multiple) {
        let value = this.formItems[k].defaultValue ? this.formItems[k].defaultValue : []
        this.$set(this.formData, k, value)
      } else {
        let value = this.formItems[k].defaultValue ? this.formItems[k].defaultValue : ''
        this.$set(this.formData, k, value)
      }
      if (this.formItems[k].require) {
        let obj = { required: true, message: '', trigger: 'change' }
        if (this.formItems[k].type === 'input') {
          obj.message = `请输入${this.formItems[k].label}`
          obj.trigger = 'blur'
        } else {
          obj.message = `请选择${this.formItems[k].label}`
          obj.trigger = 'change'
        }
        this.rules[k] = obj
      }
    }
  },
  mounted() {
    this.search()
  },
  methods: {
    search() {
      // 查询
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.currentPage = 1
          this.fetchData()
        }
      })
    },
    resetParam() {
      // 重置
      this.$refs.form.resetFields()
    },
    fetchData() {
      this.loading = true
      let data = {
        ...this.formData,
        pageSize: this.pageSize, // 页面大小
        pageNumber: this.currentPage // 页码
      }
      // 是多选数组的就用逗号拼接
      for (let k in this.formData) {
        if (typeof (this.formData[k]) === 'object') {
          data[k] = this.formData[k].join(',')
        }
      }
      this.api(data).then(res => {
        this.loading = false
        if (res && res.code === 10000) {
          this.tableData = res.content.list
          this.totalCount = res.content.totalCount
        }
      }).catch(() => {
        this.loading = false
      })
    },
    changePagenation() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.fetchData()
        }
      })
    }
  },
  beforeDestroy() {},
  destroyed() {},
  beforeUpdate() {},
  updated() {}
}
</script>
<style lang='scss' scoped>
.ky-container{
    .click-button{
        width: 125px;
    }
}
.ky-form-inline-sm .el-form-item .el-date-editor--daterange.el-input__inner{
    width: 458px;
}
.ky-form-inline-sm .el-form-item /deep/ .el-input__inner{
    width: 180px;
}
.ky-form-inline-sm .el-form-item{
    margin-right: 22px;
}
.el-date-editor.el-input{
    width:auto;
}
</style>
